<template>
	<div>
		<el-form :model="form" :rules="formRules" ref="formRef" label-position="top">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="文章标题" prop="title">
						<el-input v-model="form.title" placeholder="请输入标题"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="文章首图URL" prop="picture">
						<el-input v-model="form.picture" placeholder="文章首图，用于随机文章展示"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<!--<el-form-item label="文章描述" prop="type">-->
			<!--	<mavon-editor v-model="form.type"/>-->
			<!--</el-form-item>-->

			<el-form-item label="文章正文" prop="content">
				<mavon-editor v-model="form.content"/>
			</el-form-item>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="分类" prop="type">
						<el-select v-model="form.type" placeholder="请选择分类（输入可添加新分类）" :allow-create="true" :filterable="true" style="width: 100%;">
							<el-option :label="item.name" :value="item.name" v-for="item in typegoryList" :key="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<!--<el-form-item label="标签" prop="author">-->
					<!--	<el-select v-model="form.author" placeholder="请选择标签（输入可添加新标签）" :allow-create="true" :filterable="true" :multiple="true" style="width: 100%;">-->
					<!--		<el-option :label="item.name" :value="item.id" v-for="item in author" :key="item.id"></el-option>-->
					<!--	</el-select>-->
					<!--</el-form-item>-->
          <el-form-item label="文章作者" prop="author">
            <el-input v-model="form.author" placeholder="请输入作者"></el-input>
          </el-form-item>
				</el-col>
			</el-row>

			<!--<el-row :gutter="20">-->
			<!--	<el-col :span="8">-->
			<!--		<el-form-item label="字数" prop="words">-->
			<!--			<el-input v-model="form.words" placeholder="请输入文章字数（自动计算阅读时长）" type="number"></el-input>-->
			<!--		</el-form-item>-->
			<!--	</el-col>-->
			<!--	<el-col :span="8">-->
			<!--		<el-form-item label="阅读时长(分钟)" prop="readTime">-->
			<!--			<el-input v-model="form.readTime" placeholder="请输入阅读时长（可选）默认 Math.round(字数 / 200)" type="number"></el-input>-->
			<!--		</el-form-item>-->
			<!--	</el-col>-->
			<!--	<el-col :span="8">-->
			<!--		<el-form-item label="浏览次数" prop="views">-->
			<!--			<el-input v-model="form.views" placeholder="请输入文章字数（可选）默认为 0" type="number"></el-input>-->
			<!--		</el-form-item>-->
			<!--	</el-col>-->
			<!--</el-row>-->

			<el-form-item style="text-align: right;">
				<el-button type="primary" @click="dialogVisible=true">保存</el-button>
			</el-form-item>
		</el-form>

		<!--编辑可见性状态对话框-->
		<el-dialog title="确认提交?" width="30%" :visible.sync="dialogVisible">
			<!--内容主体-->
			<!--<el-form label-width="50px" @submit.native.prevent>-->
			<!--	<el-form-item>-->
			<!--		<el-radio-group v-model="radio">-->
			<!--			<el-radio :label="1">公开</el-radio>-->
			<!--			<el-radio :label="2">私密</el-radio>-->
			<!--			<el-radio :label="3">密码保护</el-radio>-->
			<!--		</el-radio-group>-->
			<!--	</el-form-item>-->
			<!--	<el-form-item label="密码" v-if="radio===3">-->
			<!--		<el-input v-model="form.password"></el-input>-->
			<!--	</el-form-item>-->
			<!--	<el-form-item v-if="radio!==2">-->
			<!--		<el-row>-->
			<!--			<el-col :span="6">-->
			<!--				<el-switch v-model="form.appreciation" active-text="赞赏"></el-switch>-->
			<!--			</el-col>-->
			<!--			<el-col :span="6">-->
			<!--				<el-switch v-model="form.recommend" active-text="推荐"></el-switch>-->
			<!--			</el-col>-->
			<!--			<el-col :span="6">-->
			<!--				<el-switch v-model="form.commentEnabled" active-text="评论"></el-switch>-->
			<!--			</el-col>-->
			<!--			<el-col :span="6">-->
			<!--				<el-switch v-model="form.top" active-text="置顶"></el-switch>-->
			<!--			</el-col>-->
			<!--		</el-row>-->
			<!--	</el-form-item>-->
			<!--</el-form>-->
			<!--底部-->
			<span slot="footer">
				<el-button @click="dialogVisible=false">取 消</el-button>
				<el-button type="primary" @click="submit">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Breadcrumb from "@/components/Breadcrumb";
	import {gettypegoryAndTag, saveBlog, getBlogById, updateBlog} from '@/api/blog'

	export default {
		name: "WriteBlog",
		components: {Breadcrumb},
		data() {
			return {
				// typegoryList: [],
				typegoryList: [
          {
            id : 1,
            name : '散文'
          },
          {
            id : 2,
            name : '故事'
          },
          {
            id : 1,
            name : '段子'
          }
        ],
				author: [],
				dialogVisible: false,
				radio: 1,
				form: {
					title: '',
					picture: '',
					type: '',
					content: '',
					// type: null,
					author: '',
					// words: null,
					// readTime: null,
					// views: 0,
					// appreciation: false,
					// recommend: false,
					// commentEnabled: false,
					// top: false,
					// published: false,
					// password: '',
				},
				formRules: {
					title: [{required: true, message: '请输入标题', trigger: 'change'}],
					picture: [{required: true, message: '请输入首图链接', trigger: 'change'}],
					type: [{required: true, message: '请选择分类', trigger: 'change'}],
					author: [{required: true, message: '作者', trigger: 'change'}],
					words: [{required: true, message: '请输入文章字数', trigger: 'change'}],
				},
			}
		},
		watch: {
			'form.words'(newValue) {
				this.form.readTime = newValue ? Math.round(newValue / 200) : null
			},
		},
		created() {
			this.getData()
			if (this.$route.params.id) {
				this.getBlog(this.$route.params.id)
			}
		},
		methods: {
			getData() {
				// gettypegoryAndTag().then(res => {
				// 	if (res.code === 200) {
				// 		this.typegoryList = res.data.typegories
				// 		this.author = res.data.tags
				// 	}
				// })
			},
			getBlog(id) {
        console.log("获取文章"+id);
				getBlogById(id).then(res => {
          res = res.data;
					if (res.code === 1) {
						// this.computetypegoryAndTag(res.data)
						this.form = res.data
						this.radio = this.form.published ? (this.form.password !== '' ? 3 : 1) : 2
					}
				})
			},
			computetypegoryAndTag(blog) {
				blog.type = blog.typegory.id
				blog.author = []
				blog.tags.forEach(item => {
					blog.author.push(item.id)
				})
			},
			submit() {//保存
				// if (this.radio === 3 && (this.form.password === '' || this.form.password === null)) {
				// 	return this.msgError("密码保护模式必须填写密码！")
				// }
				this.$refs.formRef.validate(valid => {
					if (valid) {
						if (this.radio === 2) {
							this.form.appreciation = false
							this.form.recommend = false
							this.form.commentEnabled = false
							this.form.top = false
							this.form.published = false
						} else {
							this.form.published = true
						}
						if (this.radio !== 3) {
							this.form.password = ''
						}
						if (this.$route.params.id) {
							this.form.typegory = null
							this.form.tags = null
							updateBlog(this.form).then(res => {
                res = res.data;
								if (res.code === 1) {
									this.msgSuccess(res.msg)
									this.$router.push('/blog/list')
								}
							})
						} else {
							saveBlog(this.form).then(res => {
                res = res.data;
								if (res.code == 1) {
									this.msgSuccess(res.msg)
									this.$router.push('/blog/list')
								}
							})
						}
					} else {
						this.dialogVisible = false
						return this.msgError('请填写必要的表单项')
					}
				})
			}
		}
	}
</script>

<style scoped>

</style>